<template>
  <view class="trasac-content">
    <top-search
      :showState="true"
      :showMore="false"
      :showCarNo="false"
      :showCustomer="false"
      :showSearch="false"
      :placeholder="'请输入供应商名称'"
      @bindChange="confirmChange"
    ></top-search>
    <view class="filter-box">
      <view class="date-time-box">
        <uni-datetime-picker
          type="daterange"
          ref="datePickerRefs"
          returnType="timestamp"
          v-model="queryParam.createTimes"
          @change="timeChange"
        />
      </view>
      <view class="split-line"></view>
      <view class="type-select-box">
        <picker
          mode="selector"
          :range-key="'label'"
          :range="tradeTypeList"
          :value="queryParam.transType"
          @change="selectChange"
        >
          <view v-if="queryParam.transType" class="uni-input">{{
            queryParam.transType
          }}</view>
          <view v-else class="placeholder">选择交易类型</view>
        </picker>
        <uni-icons
          v-if="queryParam.transType"
          class="clear-icon"
          @click.native="clearSelectValue"
          type="clear"
          color="#c0c4cc"
          size="22"
        >
        </uni-icons>
      </view>
    </view>
    <view class="content-box">
      <view
        class="records-box-wrap"
        v-for="item in recordsList"
        :key="item.id"
        @click="linkToDetail(item)"
      >
        <view>
          <view
            class="icon-text"
            :class="{
              'outer-bg-blue': iconBlue(item.transType),
              'outer-bg-yellow': [2, 3].includes(item.transType)
            }"
          >
            <view
              :class="{
                'inner-bg-blue': iconBlue(item.transType),
                'inner-bg-yellow': [2, 3].includes(item.transType)
              }"
            >
              {{ typeMap[item.transType] }}
            </view>
          </view>
        </view>
        <view style="flex: 1">
          <view class="title-sub">
            <view class="name">{{ item.supplierName }}</view>
            <view class="amount-text">{{ item.revealAmount }}</view>
          </view>
          <view class="weak-text" style="margin-top: 4px">
            {{ item.purchaserName }}
          </view>
          <view class="weak-text">{{ dateFormatForZH(item.createTime) }}</view>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
import { getDictDatas } from '@/api/transport.js';
import { getFinanceDetail } from '@/api/wallet.js';
import { timestampToChineseDate, getDateFormat } from '@/utils/common.js';
export default {
  data() {
    return {
      isMore: 'more',
      recordsList: [
        {
          id: 1,
          tradeType: 1,
          payAmount: 10,
          postTradeBalance: 20,
          createTime: '大梁湾煤矿'
        }
      ],
      datetimerange: [],
      status: null,
      tradeTypeList: [],
      statusName: '请选择交易类型',
      typeMap: {
        1: '充',
        2: '退',
        3: '货',
        4: '取'
      },
      queryParam: {
        pageNo: 1,
        pageSize: 10,
        supplierName: '',
        transType: '',
        createTimes: []
      }
    };
  },
  computed: {
    dateFormatForZH() {
      return (value) => {
        return getDateFormat(value);
      };
    },
    iconRed() {
      return (type) => {
        return (
          [4].includes(type) &&
          this.$store.state.user.curTypeColor === '#D22C2C'
        );
      };
    },
    iconBlue() {
      return (type) => {
        return (
          [1, 4].includes(type) &&
          this.$store.state.user.curTypeColor === '#409EFE'
        );
      };
    }
  },
  onLoad() {
    this.recordsList = [];
    this.getDictDatas();
    this.getList();
  },
  onPullDownRefresh() {
    this.queryParam.pageNo = 1;
    this.isMore = 'more';
    this.recordsList = [];
    this.getList();
  },
  onReachBottom() {
    if (this.isMore == 'more') {
      this.queryParam.pageNo++;
      this.getList();
    }
  },
  methods: {
    confirmChange(value) {
      this.isMore = 'more';
      this.recordsList = [];
      this.queryParam.pageNo = 1;
      this.queryParam.supplierName = value.vehicleNo;
      this.getList();
    },
    timeChange(timeRange) {
      this.queryParam.createTimes = timeRange;
      this.isMore = 'more';
      this.recordsList = [];
      this.queryParam.pageNo = 1;
      this.getList();
    },
    selectChange(value) {
      this.isMore = 'more';
      this.recordsList = [];
      this.queryParam.pageNo = 1;
      const index = value.detail.value;
      this.queryParam.transType = this.tradeTypeList[index]?.label;
      this.getList();
    },
    clearSelectValue() {
      this.queryParam.pageNo = 1;
      this.queryParam.transType = '';
      this.recordsList = [];
      this.getList();
    },
    async getDictDatas() {
      const res = await getDictDatas();
      if (res.code === 0) {
        this.tradeTypeList = res?.data?.filter(
          (e) => e.dictType === 'trans_type'
        );
      }
    },
    async getList() {
      try {
        const data = JSON.parse(JSON.stringify(this.queryParam));
        if (data.transType) {
          data.transType = this.tradeTypeList.find(
            (e) => e.label === data.transType.toString()
          ).value;
        }
        if (data.createTimes.length === 2) {
          data.createTimes[0] = `${timestampToChineseDate(
            data.createTimes[0]
          )} 00:00:00`;
          data.createTimes[1] = `${timestampToChineseDate(
            data.createTimes[1]
          )} 23:59:59`;
        }
        const res = await getFinanceDetail(data);
        if (res.code == 0) {
          const result = res.data.list || [];
          this.recordsList = [...this.recordsList, ...result];
          if (res.data.total == this.recordsList.length) {
            this.isMore = 'noMore';
          } else {
            this.isMore = 'more';
          }
        }
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();
      } catch (e) {
        return false;
      }
    },
    linkToDetail(item) {
      this.$tab.navigateTo(
        `/packageA/pages/my-wallet/transactionDetails?id=${item.id}`
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.outer-bg-red {
  background-color: #ffa59c;
}
.inner-bg-red {
  background-color: #d32d2d;
}
.outer-bg-blue {
  background-color: #c5e2ff;
}
.inner-bg-blue {
  background-color: #49a4ff;
}
.outer-bg-yellow {
  background-color: #ffe8aa;
}
.inner-bg-yellow {
  background-color: #ffd155;
}
.content-box {
  margin: 17.78rpx;
  .icon-text {
    width: 78.22rpx;
    height: 78.22rpx;
    padding: 8rpx;
    color: #ffffff;
    border: 3.56rpx solid;
    border-radius: 60.44rpx;
    margin-right: 17.78rpx;
    > view {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 32rpx;
      border-radius: 50%;
    }
  }
  .records-box-wrap {
    display: flex;
    padding: 26.67rpx;
    background-color: #ffffff;
    > view:first-child {
      display: flex;
      align-items: center;
    }
    .name {
      font-size: 32rpx;
      font-weight: 500;
    }
    .title-sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .amount-text {
      text-align: end;
      font-size: 35.56rpx;
      font-weight: 600;
    }
    .weak-text {
      line-height: 24px;
      color: #999999;
    }
  }
  .records-box-wrap + .records-box-wrap {
    margin-top: 17.78rpx;
  }
}

.filter-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  > .date-time-box {
    flex: 4;
  }
  > .type-select-box {
    flex: 2;
    padding: 0 24px 0 10px;
  }
}

.split-line {
  height: 20px;
  border-left: 1px solid #d9d9d9;
}

.clear-icon {
  position: absolute;
  right: 4px;
  top: 9px;
}

.placeholder {
  color: #666666;
}

::v-deep .date-time-box .uni-date-x--border,
::v-deep .date-time-box .uni-date-x {
  border-radius: 0 !important;
  border: 0 !important;
}
</style>
